<!--
 * @Author: wuyang
 * @Description: 
 * @Date: 2023-01-07 19:59:51
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-07 20:01:53
 * @FilePath: \vue3-graduate\src\views\memberCenter\memberList.vue
-->
<template>
  <div class="form-container">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="search-content container demo-ruleForm "
      size="default" status-icon>
      <h1 class="search-title">查询表格</h1>
      <div class="search-main">
        <div class="search-form">
          <el-form-item label="申请类型:" prop="college">
            <el-select v-model="ruleForm.college" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="当前状态:" prop="major">
            <el-select v-model="ruleForm.major" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="审批人:" prop="grade">
            <el-select v-model="ruleForm.grade" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间:" prop="classes">
            <el-select v-model="ruleForm.classes" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </div>
        <div class="search-button">
          <el-form-item>
            <el-button type="primary" @click="handleSearch" :icon="Search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)" :icon="RefreshRight">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="main-content container">
      <el-table :data="tableData" stripe style="min-height: 40rem">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="applyPerson" label="申请人" />
        <el-table-column prop="applyType" label="申请类型"  />
        <el-table-column prop="applyTime" label="申请时间"  />
        <el-table-column prop="checkPerson" label="审批人" />
        <el-table-column prop="checkTime" label="审批时间" />
        <el-table-column prop="status" label="当前状态" />
        <el-table-column prop="operate" label="操作" width="300">
          <template #default="scope">
            <div class="theme-success">
              <el-button type="primary" link>查看</el-button>
              <el-button type="primary" link>领取</el-button>
              <el-button type="primary" link>归还</el-button>
              <el-button type="primary" link>无法归还</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination></Pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search, RefreshRight, Upload, Download, Close, Position } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

// 表单数据
const tableData = [
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "领用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "活动创建",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "借用申请",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
  {
    applyPerson: "张三",
    studentNumber: 201931773318,
    applyType: "社团信息修改",
    applyTime: "2022-12-11-23.52",
    checkPerson: "李忠政",
    checkTime: "2022-12-11-23.52",
    status: "待审批",
  },
];

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  college: '',
  major: '',
  grade: '',
  classes: '',
  name: '',
  studentNumber: '',
})

const rules = reactive<FormRules>({
  college: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  major: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  grade: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  classes: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  name: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ],
  studentNumber: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ]
})
/**
 * 查询
 */
const handleSearch = () => {
  
}
/**
 * 重置验证规则
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped lang="scss">
.form-container {
  height: 100%;
  display: grid;
  grid-template-rows: 14rem auto;
  gap: 1rem;

  .search-content {
    background-color: #fff;
    display: grid;
    grid-template-rows: 1fr 4fr;
    padding: 1rem 0;


    .search-title {
      font-size: 1.6rem;
    }

    .search-main {
      display: grid;
      grid-template-columns: auto 8rem;
      margin-top: 1.5rem;

      .search-form {
        display: flex;
        flex-wrap: wrap;
      }

      .search-button {
        display: grid;

        .el-button {
          width: 5em;
          height: 3rem;
          padding: 1rem 0;

          &:last-child {
            margin: 0 !important;
          }
        }
      }

      .el-form-item {
        line-height: 3rem;
        height: 3rem;
        margin-right: 5rem;
      }

      .el-input {
        width: 23.68rem !important;
      }
    }
  }

  .main-content {
    background-color: #fff;
    .operate-box {
      display: flex;
      align-items: center;
    }
  }

}
</style>